<template>
  <div class="result">
    <!-- 查看详情弹窗 -->
    <el-dialog
      width="630px"
      height="328px"
      title="设备详情"
      :visible.sync="detailVisible"
      @close="detailClose">
      <!-- 第一行 -->
      <el-row type="flex" align="middle" justify="space-around" style="height:54px;background-color:#f4f6fb">
        <el-col :span="6" style="text-align:center">
          <span>销售量：</span>
          <span style="color:#5f84ff">{{ detail.total }} 个</span>
        </el-col>
        <el-col :span="6" style="text-align:center">
          <span>销售额：</span>
          <span style="color:#5f84ff">{{ detail.salesTotal / 100 }} 元</span>
        </el-col>
        <el-col :span="6" style="text-align:center">
          <span>补货次数：</span>
          <span style="color:#5f84ff">{{ detail.supply }} 次</span>
        </el-col>
        <el-col :span="6" style="text-align:center">
          <span>维修次数：</span>
          <span style="color:#5f84ff">{{ detail.repair }} 次</span>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-row style="margin: 20px 0 12px 6px;">商品销量（月）</el-row>
      <el-row style="border-top: 1px solid #d8dde3;border-left: 1px solid #d8dde3;margin-bottom:10px">
        <el-col v-for="(item, index) in detailList" :key="index" :span="6" style="line-height: 40px;border-right: 1px solid #d8dde3;border-bottom: 1px solid #d8dde3;">
          <el-row style="padding-left:20px">
            <el-col :span="14" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}">{{ item.skuName }}</el-col>
            <el-col :span="10">: {{ item.count }}</el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 表格 -->
    <el-table
       v-loading="loading"
      :header-cell-style="{
        background: '#f3f6fb',
        height: '42px',
        color: '#666',
        fontWeight: '400',
        border: 'none',
      }"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :row-style="{ height: '44px' }"
      :cell-style="{ padding: 0, border: 'none' }"
    >
      <el-table-column prop="index" label="序号" width="80">
      </el-table-column>
      <el-table-column prop="innerCode" label="设备编号" width="204">
      </el-table-column>
      <el-table-column prop="type.name" label="设备型号" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="node.name" label="详细地址" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="vmStatus" label="运营状态" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="设备状态" width="300" show-overflow-tooltip>
        <el-row type="flex">
          <span class="status-button" type="info" size="small" round>离线</span>
          <span type="success" class="status-button" size="small" round>货道</span>
          <span type="success" class="status-button" size="small" round>传动轴</span>
        </el-row>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template v-slot="{ row }">
          <el-button type="text" @click="getDetail(row.innerCode)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="footer" ref="footer" v-if="paginationVisible && totalCount > pageSize">
      <span
        >共{{ this.totalCount }}条数据 第 {{ this.current }}/{{
          this.totalPage
        }}
        页</span
      >
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-size="pageSize"
        layout="slot"
        :total="+totalCount"
        ref="page"
      >
      <div class="btn-group">
        <el-button type="primary" ref="prev" :disabled="current === 1" :class="{ disable: current === 1 }" @click="prev">上一页</el-button>
        <el-button type="primary" ref="next" :disabled="current === +totalPage" :class="{ disable: current === +totalPage }" @click="next">下一页</el-button>
      </div>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { searchTable } from '@/api/devicemange'
import { orderList, salesDetail, salesAmount, getSupply, getRepair } from '@/api/devicestatus'
export default {
  data () {
    return {
      loading: false, // 区域加载
      codeList: [],
      disable1: true,
      disable2: false,
      status: 0,
      // pageIndex: 1,
      pageSize: 10,
      current: 1, // 当前页
      totalCount: '', // 总条数
      totalPage: '', // 总页数
      tableData: [], // table数据
      paginationVisible: true, // 分页是否显示
      detailVisible: false, // 查看详情弹窗是否显示
      detailList: [], // 详情数据
      detail: {
        total: '', // 销售量
        salesTotal: '', // 销售额
        supply: '', // 补货次数
        repair: '' // 维修次数
      }
    }
  },
  props: {
    device: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    // 监听从搜索栏 => 父组件 => 这个组件的 device
    // 如果发生变化，就修改 tableData 的数据
    device (val) {
      if (val.length === 0) {
        this.tableData = []
      } else if (val.length === 1) {
        this.tableData = val
        // 修改索引
        val[0].index = 1
        this.paginationVisible = false
      } else {
        // code 为空的话 获取全部数据
        this.getTableData()
        this.paginationVisible = true
      }
    }
    // 监听 tableData 的变化，如果为空，则把分页隐藏
    // tableData (val) {
    //   if (!val.length) {
    //     this.$refs.footer.style.visibility = 'hidden'
    //   } else {
    //     this.$refs.footer.style.visibility = 'visible'
    //   }
    // }
  },
  created () {
    // 调用获取表格数据方法
    this.getTableData()
  },
  computed: {
    // // 当前时间 时分秒
    // nowAll () {
    //   return this.$dayjs().format('YYYY-MM-DD HH:mm:ss')
    // },
    // // 本月第一天 时分秒
    // monthFirstAll () {
    //   return this.$dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss')
    // },
    // 当前时间
    now () {
      return this.$dayjs().format('YYYY-MM-DD')
    },
    // 本月第一天
    monthFirst () {
      return this.$dayjs().startOf('month').format('YYYY-MM-DD')
    },
    vmStatus () {
      if (this.tableData.vmStatus === 0) {
        return '未投放'
      } else if (this.tableData.vmStatus === 1) {
        return '运营'
      } else {
        return '撤机'
      }
    }
  },

  methods: {
    // 点击查看详情
    async getDetail (innerCode) {
      // 商品销量
      const resSalesDetail = await salesDetail({
        innerCode,
        start: this.monthFirst,
        end: this.now
      })
      this.detailList = resSalesDetail

      // 销售量
      const orderlist = await orderList({
        start: this.monthFirst + ' 00:00:00',
        end: this.now + ' 23:59:59',
        innerCode
      })
      this.detail.total = orderlist

      // 销售额
      const detailamount = await salesAmount({
        start: this.monthFirst + ' 00:00:00',
        end: this.now + ' 23:59:59',
        innerCode
      })
      this.detail.salesTotal = detailamount

      // 补货次数
      const suppl = await getSupply({
        innerCode,
        start: this.monthFirst,
        end: this.now
      })
      this.detail.supply = suppl

      // 维修次数
      const repai = await getRepair({
        innerCode,
        start: this.monthFirst,
        end: this.now
      })
      this.detail.repair = repai

      this.detailVisible = true // 打开弹层
    },
    // 详情弹窗关闭
    detailClose () {
      this.detailVisible = false
    },
    // 封装获取表格数据方法
    async getTableData (val) {
      this.loading = true
      const res = await searchTable({
        pageIndex: this.current,
        pageSize: this.pageSize
      })
      // 将设备状态从 0 1 2 转换成 => 未投放 运营 撤机
      res.currentPageRecords.forEach((item, index) => {
        if (item.vmStatus === 0) {
          item.vmStatus = '未投放'
        } else if (item.vmStatus === 1) {
          item.vmStatus = '运营'
        } else {
          item.vmStatus = '撤机'
        }
        // 设置顺序序号
        item.index = index + 1 + res.pageSize * (res.pageIndex - 1)
      })
      // data的数据
      this.tableData = res.currentPageRecords
      // 总条数
      this.totalCount = res.totalCount
      // 总页数
      this.totalPage = res.totalPage
      this.$refs.multipleTable.clearSelection() // 重置多选框
      this.loading = false
    },
    // 下一页
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      // 处理当前页变化
      this.current = val
      // 重新获取数据
      this.getTableData()
    },
    // 按钮下一页
    next () {
      this.$refs.page.next()
      this.disable1 = false
      if (this.current >= +this.totalPage - 1) {
        // this.$refs.next.disabled = true
        this.disable2 = true
        // console.log(this.$refs.next)
      } else {
        this.disable2 = false
      }
    },
    // 按钮上一页
    prev () {
      this.$refs.page.prev()
      this.disable2 = false
      if (this.current === 1) {
        // this.$refs.next.disabled = true
        this.disable1 = true
        // console.log(this.$refs.next)
      } else {
        this.disable1 = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.status-button {
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  // width: 52px;
  // height: 23px;
  padding: 0 12px;
  color: #fff;
  border-radius: 12px;
  font-size: 14px;
  margin-right: 10px;
  background: #ff665f linear-gradient(135deg,#3fc997,#4bda98);
  &:nth-child(1) {
    background: #ff665f linear-gradient(135deg,#ffb043,#ffc020);
  }
}
// .disable {
//   background: #edf0f9;
//   color: #d8dde3;
// }
.result {
  padding: 20px 15px 19px 17px;
  .el-dialog__wrapper.update::v-deep {
    .el-dialog__body {
      .el-form-item {
        height: 36px;
        margin-bottom: 20px;
      }
    }
  }
  // 按钮区域
  .btn {
    margin-bottom: 20px;
    .el-button {
      width: 80px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      &.new {
        background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
      }
      &.operate {
        background-color: #fbf4f0 !important;
        color: #655b56 !important;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 32px 16px;
    span {
      font-size: 16px !important;
      color: #dbdfe5 !important;
    }
    .btn-group {
      display: flex;
      .el-button {
        width: 70px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 16px;
        background-color: #d5ddf8;
        color: #606266;
        border: none;
        border-radius: 2px;
        &.disable {
          background: #edf0f9;
          color: #d8dde3;
        }
      }
    }
  }
  .el-dialog__wrapper::v-deep {
    .el-dialog {
      border-radius: 10px;
      // height: 326px;
      .el-dialog__header {
        .el-dialog__title {
          font-size: 16px;
          color: #333;
        }
      }
      .el-dialog__body {
        padding: 20px 20px 10px;
        .el-form-item {
          .el-form-item__content {
            el-cascader {
              width: 396px;
              height: 36px;
            }
          }
        }
      }
      .el-dialog__footer {
        text-align: center;
        padding: 0 20px 35px;
        .dialog-footer {
          display: flex;
          justify-content: center;
          .el-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 36px;
            border: none;
            background-color: #fbf4f0 !important;
            color: #655b56;
            &:nth-child(2) {
              margin-left: 34px;
              background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
